<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
    <el-row class="warp">
      <el-col :span="24" class="warp-main">
        <el-form ref="infoForm" :model="infoForm" label-width="120px">
          <el-form-item label="设备名称" prop="a_title">
            <el-input v-model="infoForm.name" placeholder="填写设备名称"></el-input>
          </el-form-item>
          <el-form-item label="保修位置" @click.native="userInfoFn">
            <el-input v-model="usersName" placeholder="选择保修位置" readonly="" type="text"></el-input>
          </el-form-item>
          <el-form-item label="保修描述">
            <div class="edit_container">
              <quill-editor v-model="infoForm.description"
                            ref="myQuillEditor"
                            class="editer"
                            :options="editorOption" placeholder="通知内容">
              </quill-editor>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="small">提交保修</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!--选择通知人员-->
    <el-dialog title="选择保修位置" :visible.sync="dialogTableVisible">
      <el-table :data="arryList"
                height="300"
                @select-all="selectAll"
                @select="selectFnBox"
                :stripe="tableStripe"
                :border="tableBorder"
                tooltip-effect="dark"
                ref="table">
        <el-table-column
                type="selection"
                width="50">
        </el-table-column>
        <el-table-column label="班级" prop="class_id">
          <template slot-scope="scope">
            {{scope.row.class_id?scope.row.class_id.class_name:'数据未添加'}}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
              :page-size="pageSize"
              layout="prev, pager, next"
              :total="pageTotal"
              @current-change="handleSizeChange">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="userlist('yse')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  </div>
</template>

<script>
  import {quillEditor} from 'vue-quill-editor' // 调用编辑器
  import quillConfig from '@/assets/js/quill-config.js'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  export default {
    data () {
      return {
        tableStripe: true, // 是否斑马栏
        tableBorder: true, // 单元格右边边框
        dialogTableVisible: false,
        usersName: '',
        infoForm: {
          name: '',
          position: '',
          description: ''
        },
        editorOption: quillConfig,
        page: 1,
        arryList: null,
        pageTotal: null,
        pageSize: 20,
        applyBookBox: {}, // 选中人员信息
        applyBookBoxInit: {} // 本页面对应对象
      }
    },
    computed: {
      editor () {
        return this.$refs.myQuillEditor.quill
      }
    },
    mounted () {
      // 初始化
      this.Inint()
    },
    methods: {
      Inint () {
        let _this = this
        this.$fetch('admin_user/index', {p: this.page}).then((response) => {
          console.log('数据：', response)
          if (response.code === 0) {
            this.arryList = response.list.data
            this.pageTotal = response.list.total
            let applyBookBoxInit = {}
            for (let i = 0; i < response.list.data.length; i++) {
              applyBookBoxInit[response.list.data[i].id] = response.list.data[i]
            }
            this.applyBookBoxInit = applyBookBoxInit
            _this.$nextTick(function () {
              _this.checked() // 每次更新了数据，触发这个函数即可。
            })
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 点击全选
      selectAll (val) {
        // 全选所有跟空值，即使页面已经选择2项
        console.log('点击全选', val)
        console.log(val) // 所有选中值
        let applyBookBox = this.applyBookBox
        if (val.length !== 0) {
          // this.handleSelection = val
          for (let i = 0; i < val.length; i++) {
            if (!applyBookBox[val[i].id]) {
              // 不存在图书
              applyBookBox[val[i].id] = val[i]
            }
          }
        } else {
          // 清除所有 arryList
          for (let i = 0; i < this.arryList.length; i++) {
            if (this.applyBookBox[this.arryList[i].id]) {
              // 存在图书删除
              delete applyBookBox[this.arryList[i].id]
            }
          }
        }
        this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
      },
      // 设置默认选中
      checked () {
        console.log('默认选项判断', this.applyBookBox)
        for (let i = 0; i < this.arryList.length; i++) {
          if (this.applyBookBox[this.arryList[i].id]) {
            console.log('数值', i)
            this.$refs.table.toggleRowSelection(this.arryList[i], true)
          }
        }
      },
      // 点击单选
      selectFnBox (val) {
        // 选择的是当前所有的选中，还需要比对未选中项 applyBookBoxInit
        console.log('本页面的列表数据', this.applyBookBoxInit)
        console.log('点击单选', val)
        let applyBookBox = this.applyBookBox
        if (val.length !== 0) {
          // 有选项 对本页面的选项进行比对
          let valBox = {}
          for (let i = 0; i < val.length; i++) {
            valBox[val[i].id] = val[i]
          }
          for (let i in this.applyBookBoxInit) {
            if (valBox[i]) {
              // 存在图书删除
              applyBookBox[i] = this.applyBookBoxInit[i]
            } else {
              delete applyBookBox[i]
            }
          }
        } else {
          // 清除所有 arryList
          for (let i in this.applyBookBoxInit) {
            delete applyBookBox[i]
          }
        }
        this.applyBookBox = Object.assign({}, this.applyBookBox, applyBookBox) // 更新视图对象
      },
      handleSizeChange (val) {
        this.page = val
        this.Inint()
      },
      userlist (val) {
        console.log(this.applyBookBox)
        let userlList = ''
        let userlListId = ''
        // infoForm.a_user
        console.log(this.applyBookBox)
        for (let i in this.applyBookBox) {
          let className = this.applyBookBox[i].class_id
          if (this.applyBookBox[i].class_id === '') {
            className = '数据未添加'
          }
          userlList += (className + ',')
          userlListId += (this.applyBookBox[i].id + ',')
        }
        this.usersName = userlList.substring(0, userlList.length - 1)
        this.infoForm.position = userlListId.substring(0, userlListId.length - 1)
        this.dialogTableVisible = false
      },
      onSubmit () {
        // 提交 this.$refs.infoForm.validate，这是表单验证
        console.log('数据提交', this.usersName)
        if (this.infoForm.name === '') {
          this.$message.error('填写设备名称')
          return false
        }
        if (this.usersName === '') {
          this.$message.error('填写保修位置（班级，班级办公室）')
          return false
        }
        this.$refs.infoForm.validate((valid) => {
          if (valid) {
            this.$post('apply/add', this.infoForm).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                this.infoForm = {
                  name: '',
                  content: '',
                  users: ''
                }
                this.usersName = ''
              } else {
                this.$message({
                  message: res.msg,
                  type: 'error'
                })
              }
            })
          }
        })
      },
      // 选择用户人员
      userInfoFn () {
        this.dialogTableVisible = true
      }
    },
    components: {
      // 使用编辑器
      quillEditor
    }
  }
</script>
<style lang="scss">
  .ql-editor{
    max-height: 250px;
  }
  .el-dialog__body{
    padding:0 20px;
  }
  .el-radio__label{
    /*display: none;*/
  }
  .warp{
    width:80%;
    padding:30px;
    margin:0 auto;
  }
  .el-dialog__body {
    /*text-align: center;*/
  }
  .el-pagination{
    padding-top: 20px;
  }
</style>
